<template>
  <div class="" >
    <div class="header-bg" v-show="!this.fixed">
      <div class="flex-between">
        <div class="back" @click.prevent.stop="goBack"><img src="../../../assets/img/prev.png" alt=""></div>
        <div class="flex-center">
          <div class="share" @click.prevent.stop="shareHandler"><img src="../../../assets/img/fenxiang.png" alt="分享"></div>
        </div>
      </div>
    </div>
    <div class="time-line" :class="{'box-shadow': this.fixed }">
      <div class="flex-center">
        <!--<div class="line" style="width: 15%;">
          <span class="text" >08.15-08.19</span>
          <img src="../../../assets/img/hongbao.png" alt="红包活动" v-if="pageIndex == 0" class="animate-pos " :class="{'animated':animate ,'tada':animate}">
          <span v-else class="over">已结束</span>
        </div>-->
        <div class="line" style="width: 20%;">
          <span class="text" @click="changePage(0)">{{ starTime }}</span>
          <img src="../../../assets/img/starIcon.png" alt="点亮星灯" v-if="pageIndex===0&&!starOver&&!starWait" :class="{'animated':animate ,'rubberBand':animate}" class="animate-pos">
          <span v-if="starOver" class="over">已结束</span>
          <span v-if="starWait" class="over wait">未开始</span>
        </div>
        <div class="line" style="width: 60%;">
          <span class="text text-828" @click="changePage(1)" v-if="lotteryTime">{{ lotteryTime }}<img src="../../../assets/img/fire.png" alt="火爆" class="animated pulse infinite animate-fire"></span>
          <img src="../../../assets/img/car.png" alt="抽奖" class="car-icon " v-if="pageIndex===1&&!lotteryOver&&!lotteryWait" :class="{'animated':animate ,'lightSpeedIn':animate}" >
          <span v-if="lotteryOver" class="over">已结束</span>
          <span v-if="lotteryWait" class="over wait">未开始</span>
        </div>
        <div class="line" style="width: 20%;"></div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Jsbridge from '../../../utils/jsbridge';
  export default {
    props: {
      fixed: {
        type: Boolean,
        default: false
      },
      pos: {
        type: Number,
        default: 0
      }
    },
    data () {
      return {
        animate: true,
        pageIndex: 0,
        lotteryTime: '',
        starTime: '',
        starOver: false,
        starWait: false,
        lotteryWait: false,
        lotteryOver: false,
        jsbridge: new Jsbridge()
      }
    },
    mounted () {
      this.$root.eventBus.$on('scrollEnd', (res) => {
        this.pageIndex = res;
      });
      this.$root.eventBus.$on('activeInfo', (r) => {
        this.activeData = r;
        this.showTime();
        // 进入8.28当天 则直接进入828抽奖页面
        if (!this.lotteryWait && !this.lotteryOver) {
          // console.log('11111111111')
          this.changePage(1)
        } else {
          // console.log('00000')
          this.changePage(0)
        }
      });
      // this.$root.userInfo.activityTime.lotteryActivityTime
      //   this.timerG = setInterval(() => {
      //   this.animate = !this.animate;
      // }, 2000)
    },
    methods: {
      shareHandler () {
        this.jsbridge.call('sharingComponents', {
          title: '828低碳节，全民充电狂欢',
          contentInfo: '充电全免，千万好礼，尽在星星充电APP',
          imageUrl: 'https://app-cdn.starcharge.com/starcharge_828_logo.png',
          linkUrl: 'https://828.starcharge.com/828/index.html#/timeline?city=' + this.activeData.city
        });
      },
      showTextTime (timeStr) {
        let formatTimeStr = timeStr.replace(/-/g, '.');
        let formatExp = /\d{1,2}\.*\d{1,2}\B./g;
        return formatTimeStr.match(formatExp)[1]
        // formatExp.match(formatTimeStr)
        // formatTimeStr.split()
      },
      timeToS (dateTime) {
        let formatTime = dateTime.replace(/-/g, '/');
        return (new Date(formatTime).getTime()) / 1000;
      },
      showTime () {
        const lotteryTime = JSON.parse(this.activeData.activityTime).dayActivityTime;
        const starTime = JSON.parse(this.activeData.activityTime).starLampTime;
        const currentTime = this.activeData.currentTime;
        // let timeExp=/^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/;
        let lotteryStartTime = lotteryTime.split('--')[0];
        let lotteryEndTime = lotteryTime.split('--')[1];
        let starStartTime = starTime.split('--')[0];
        let starEndTime = starTime.split('--')[1];
        if (this.showTextTime(lotteryStartTime) === this.showTextTime(lotteryEndTime)) {
          this.lotteryTime = this.showTextTime(lotteryStartTime)
        } else {
          this.lotteryTime = this.showTextTime(lotteryStartTime) + '-' + this.showTextTime(lotteryEndTime);
        }
        this.starTime = this.showTextTime(starStartTime) + '-' + this.showTextTime(starEndTime);
        this.starOver = this.timeToS(currentTime) > this.timeToS(starEndTime);
        this.lotteryOver = this.timeToS(currentTime) > this.timeToS(lotteryEndTime);
        this.starWait = this.timeToS(currentTime) < this.timeToS(starStartTime);
        this.lotteryWait = this.timeToS(currentTime) < this.timeToS(lotteryStartTime);
        // console.log('lotteryStartTime', lotteryStartTime, lotteryEndTime)
      },
      changePage (index) {
        this.$root.eventBus.$emit('changePage', index);
        // console.log(this.$refs)
      },
      gotoCoupon () {
        // this.$router.push({
        //   name: 'coupons'
        // })
        const jumpUrl = `https://828.starcharge.com/828/index.html#/timeline/coupons?accountId=${this.activeData.accountId}`;
        this.jsbridge.call('frameShowPage', {
          url: jumpUrl,
          title: '我的828'
        });
      },
      beforeDestroy () {
        this.$root.eventBus.$off('scrollEnd')
        // clearInterval(this.timerG)
        // console.log(this.timerG)
      },
      goBack () {
        this.jsbridge.call('frameGoBack');
      }
    }
  };
</script>

<style scoped rel="stylesheet/stylus" lang="stylus">
  @import '../../../assets/css/mixin.styl';
.fixedLine
  position absolute!important
  left 0
  right 0
  top: 0
  z-index 999
.header-bg
  height rpx(388)
  background-color #543ad0
  background-image url("https://app-ccchong-com.oss-cn-qingdao.aliyuncs.com/headerBg.png")
  background-size cover
  text-align right
  padding rpx(20)
  .share,.gift,.back
    display inline-block
    padding 0 rpx(8)
    img
      height rpx(48)
      display block
</style>
